<!-- 巡检管理-计划管理 -->
<template>
  <div class="app-container">
    <TopMenu v-if="showTopMenu" :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div v-if="showTopMenu" class="filter-container">
        <el-form ref="form" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item label="选择单位:">
            <el-select v-model="listQuery.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/inspection-plans/index']" size="small" type="primary" icon="el-icon-search" @click="handleFilter" >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <div class="plan-list">
        <ul class="plan-list-ul">
          <!-- <li v-permission="['v1/inspection-plans/create']" class="addPlan" @click="handleAdd"><i class="el-icon-plus"/><span>添加新的巡检计划</span></li> -->
          <li v-for="item in list" :key="item.index">
            <div v-if="item.isTemplate" class="plan-title">
              <img :src="templateIcon" class="templateIcon"><span class="plan-place-template">{{ item.name }}</span>
              <i class="el-icon-edit-outline" @click="iconEdit(item)"/>
              <svg-icon class-name="info-icon" icon-class="info" @click.native.prevent="iconInfo(item)"/>
            </div>
            <div v-else class="plan-title">
              <span :title="item.name" class="plan-name">{{ item.name }}</span><span class="plan-place">{{ item.plan_place }}</span>
              <i v-permission="['v1/inspection-plans/update']" class="el-icon-edit-outline" @click="iconEdit(item)"/>
              <el-switch v-permission="['v1/inspection-plans/enable']" v-model="item.is_forbidden" active-text="启用" inactive-text="禁用" active-color="#4CC1C8" inactive-color="#DA624A" @click.native.prevent="iconQiyong(item)"/>
            </div>
            <img :src="item.imgUrl" class="statusImg" alt="">
            <ul v-if="item.isTemplate" class="plan-content">
              <li><span class="plan-content-label">负责人：</span><span class="plan-content-text">李明</span></li>
              <li><span class="plan-content-label">开始时间：</span><span class="plan-content-text">{{ currentDate }}</span></li>
              <li><span class="plan-content-label">巡检周期：</span><span class="plan-content-text">1天1次</span></li>
              <li class="tag-list"><span class="plan-content-label">巡检设备：</span><div class="plan-content-tag-list"><span v-for="itemTag in item.equipmentList" :key="itemTag.key" class="plan-content-tag" >{{ itemTag }}</span></div></li>
              <li class="tag-list"><span class="plan-content-label">巡检内容：</span><div class="plan-content-tag-list"><span v-for="itemTag in item.patrolInfoList" :key="itemTag.key" class="plan-content-tag">{{ itemTag }}</span></div></li>
            </ul>
            <ul v-else class="plan-content">
              <li><span class="plan-content-label">负责人：</span><span class="plan-content-text">{{ item.leader.nickname }}</span></li>
              <li><span class="plan-content-label">开始时间：</span><span class="plan-content-text">{{ item.start_at }}</span></li>
              <li><span class="plan-content-label">巡检周期：</span><span class="plan-content-text">1{{ item.cycle === '1' ? '天' : item.cycle === '2' ? '周' : item.cycle === '3' ? '月' : '年' }}{{ item.frequency }}次</span></li>
              <li class="half"><span class="plan-content-label">巡检分区：</span><span class="plan-content-text">{{ item.zone_num }}</span></li>
              <li class="half"><span class="plan-content-label">巡检设备：</span><span class="plan-content-text">{{ item.device_num }}</span></li>
              <li class="tag-list"><span class="plan-content-label">巡检设备：</span><div class="plan-content-tag-list"><span v-for="(itemTag, index) in item.equipmentList" :key="index" class="plan-content-tag">{{ itemTag }}</span></div></li>
              <li class="tag-list"><span class="plan-content-label">巡检内容：</span><div class="plan-content-tag-list"><span v-for="(itemTag, index) in item.patrolInfoList" :key="index" class="plan-content-tag">{{ itemTag }}</span></div></li>
            </ul>
          </li>
        </ul>
      </div>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :page-sizes="[7, 15, 23, 31]" :limit.sync="listQuery.offset" @pagination="getTemplateList" />
      <formShow
        :dialog-visible.sync="dialogVisibleShow"
        :dialog-form="dialogShowForm"
        @closeBindWarnStandard="handleCloseBindWarnStandardShow"/>
      <formPlan
        :dialog-visible.sync="dialogVisible"
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
    </div>
  </div>
</template>
<script>
import { companyList, getSocialUnit } from '@/api/company'
import { inspectionPlansList, inspectionTemplatePlansList, inspectionPlansUpdate } from '@/api/plan'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formPlan from './components/formPlan.vue'
import formShow from './components/formShow.vue'
import TopMenu from '@/components/TopMenu' // 顶部菜单
import checkPermission from '@/utils/permission' // 权限判断函数
import enable from '@/assets/enable.png'
import prohibit from '@/assets/prohibit.png'
import { parseTime } from '@/utils/index'
import template from '@/assets/template.png'
import templateIcon from '@/assets/template-icon.png'

export default {
  name: 'Order',
  components: { Pagination, formPlan, formShow, TopMenu },
  data() {
    return {
      // 新增修改弹窗信息
      dialogForm: {
        corp_id: '',
        park_id: '',
        cycle_content: '',
        name: '',
        cycle: '',
        frequency: '0',
        start_at: '',
        repeat_type: '1',
        leader: '',
        workers: []
      },
      corp_id: '',
      corp_name: '',
      dialogShowForm: {},
      templateIcon,
      enable,
      prohibit,
      template,
      dialogVisibleShow: false,
      dialogVisible: false,
      dialogType: '添加',
      // 表格信息
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        offset: 7,
        corp_id: '',
        corp_name: ''
      },
      listTemQuery: {
        page: 1,
        offset: 1
      },
      topDataLabel: {
        data: []
      },
      showTopMenu: false,
      companyList: [],
      currentDate: parseTime(new Date().getTime(), '{y}-{m}-{d}')
    }
  },
  created() {
    this.getCompanyList()
    this.getTemplateList()
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      const that = this
      that.listLoading = true
      inspectionPlansList(that.listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === '2' || array[index].is_forbidden === 2
              array[index].index = index
              array[index].isTemplate = false
              array[index].leader = array[index].leader ? JSON.parse(array[index].leader) : { nickname: '' }
              array[index].start_at = parseTime(array[index].start_at * 1000, '{y}-{m}-{d}')
              let cycle_content = array[index].cycle_content ? JSON.parse(array[index].cycle_content) : ''
              // cycle_content有length说明没有值  没有length说明是个对象
              if (cycle_content !== '') {
                // 设备详情
                cycle_content = cycle_content[0]
                array[index].equipmentList = []
                array[index].patrolInfoList = []
                array[index].equipmentList.push(cycle_content.device_model_name)
                for (const item in cycle_content.standard) {
                  array[index].patrolInfoList.push(item)
                }
              }
              array[index].imgUrl = array[index].is_forbidden ? enable : prohibit
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          } else {
            that.$message.warning(response.data.message)
          }
          that.listLoading = false
        })
        .catch(() => {
          that.list = []
          that.total = 0
          that.listLoading = false
        })
    },
    getTemplateList() {
      const that = this
      that.listLoading = true
      inspectionTemplatePlansList(that.listTemQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.list = []
            for (const item in response.data.data) {
              const obj = {
                name: item,
                isTemplate: true,
                imgUrl: template,
                data: [],
                cycle_content: JSON.stringify(response.data.data[item])
              }
              const cycle_content = response.data.data[item][0]
              obj.equipmentList = []
              obj.patrolInfoList = []
              for (const it in cycle_content.standard) {
                const o = {}
                o.name = it
                o.list = []
                for (const ite in cycle_content.standard[it]) {
                  o.list.push(cycle_content.standard[it][ite])
                }
                o.length = o.list.length
                obj.data.push(o)
              }
              obj.equipmentList.push(cycle_content.device_model_name)
              for (const item in cycle_content.standard) {
                obj.patrolInfoList.push(item)
              }
              that.list.push(obj)
            }
            that.getList()
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch(() => {
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getTemplateList()
    },
    // 启用
    iconQiyong(data) {
      const that = this
      var flag = data.is_forbidden ? '启用' : '停用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = data
        params.is_forbidden = flag === '启用' ? 2 : 1
        delete params['imgUrl']
        inspectionPlansUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getTemplateList()
          })
          .catch(() => {
            that.getTemplateList()
          })
      }).catch(() => {
        that.getTemplateList()
      })
    },
    // 查看巡检表
    iconInfo(data) {
      this.dialogShowForm = data
      this.dialogVisibleShow = true
    },
    handleCloseBindWarnStandardShow() {
      this.dialogVisibleShow = false
    },
    // 修改计划
    iconEdit(data) {
      console.log(JSON.stringify(data))
      if (data.isTemplate) {
        this.dialogForm = {
          corp_id: '',
          park_id: '',
          cycle_content: '',
          name: '',
          cycle: '',
          frequency: '0',
          start_at: '',
          repeat_type: '1',
          leader: '',
          workers: []
        }
        this.dialogForm.cycle_content = data.cycle_content
        this.dialogType = '添加'
      } else {
        this.dialogForm = JSON.parse(JSON.stringify(data))
        this.dialogForm.workers = JSON.parse(this.dialogForm.workers)
        var arr = []
        this.dialogForm.workers.forEach(item => {
          arr.push(item.uuid)
        })
        this.dialogForm.workers = arr
        this.dialogType = '修改'
      }
      this.dialogVisible = true
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.dialogVisible = false
      this.getTemplateList()
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    },
    // 获取单位
    getCompanyList() {
      const that = this
      companyList()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.companyList = response.data.data.data
            that.showTopMenu = true
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
          }
        })
        .catch(() => {
        })
    },
    // 顶部切换监听
    tabsChange(value) {
      const that = this
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].name) {
          that.listQuery.corp_id = array[index].corp_id
        }
      })
      this.getTemplateList()
    },
    // 单位下拉框
    companyChange(value) {
      if (value !== '') {
        var select = {}
        this.companyList.forEach(function(data, index, array) {
          if (value === array[index].corp_id) {
            select = array[index]
          }
        })
        if (this.topDataLabel.data.indexOf(select.name) === -1) {
          this.topDataLabel.data.push(select.name)
        }
      }
    },
    getSocialUnit() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            if (data.data && data.data.length > 0) {
              that.corp_id = data.data[0].corp_id
              that.corp_name = data.data[0].name
            }
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.plan-list{
  ul{
    padding:10px 0;
    margin: 0;
    overflow: hidden;
  }
  .plan-list-ul>li{
    width: 23%;
    float: left;
    height: 340px;
    margin: 0 1% 15px 1%;
    position: relative;
    list-style: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 6px;
    box-shadow:0px 1px 5px 1px rgba(0,0,0,0.24);
    .plan-title{
      width: 100%;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid #D1D0D0;
      position:relative;
      span{
        display: block;
      }
      .plan-name{
        width: 60%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #E8441C;
        color: #FFFFFF;
        text-overflow:ellipsis;
        white-space: nowrap;
        border-radius: 6px 0 0 0;
        padding: 0 6px;
        font-size: 12px;
      }
      .plan-place-template{
        width: 100%;
        padding: 0 50px;
        font-size: 14px;
        box-sizing: border-box;
      }
      .plan-place{
        width: 100%;
        padding: 0 92px;
        font-size: 14px;
        padding-right: 90px;
        text-align: center;
        box-sizing: border-box;
      }
      .el-switch{
        position: absolute;
        right: 30px;
        top: 0;
        margin-top: 6px;
      }
      i{
        position: absolute;
        right: 0;
        top: 0;
        color: #36B4F7;
        font-size: 20px;
        margin: 9px 2px 0 2px;
        cursor: pointer;
      }
      .info-icon{
        width: 20px;
        height: 20px;
        position: absolute;
        right: 25px;
        top: 0;
        color: #77b4f7;
        margin-top: 8px;
        cursor: pointer;
      }
      .templateIcon{
        width: 26px;
        height: 26px;
        position: absolute;
        left: 16px;
        top: 5px;
      }
    }
    .plan-content{
      width: 100%;
      padding:15px 20px 34px 20px;
      li{
        list-style: none;
        line-height: 30px;
        font-size: 12px;
        position: relative;
      }
      .plan-content-label{
        color: #858282;
        display: inline-block;
        float: left;
      }
      .plan-content-text{
        color: #292828;
        display: inline-block;
      }
      .tag-list {
        .plan-content-label {
          position: absolute;
          left: 0;
          top:0;
        }
      }
      .plan-content-tag-list{
        width: 100%;
        padding-left: 60px;
        display: inline-block;
        max-height:80px;
        overflow:hidden;
        .plan-content-tag{
          height: 20px;
          line-height: 20px;
          padding: 0 4px;
          border: 1px solid #858282;
          border-radius: 4px;
          font-size: 10px;
          color: #858282;
          margin-top: 5px;
          margin-right: 5px;
          display: block;
          float: left;
        }
      }
      .half{
        width:48%;
        display: inline-block;
      }
    }
    .statusImg{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      width: 80px;
    }
  }
  .plan-list-ul>li.template{
    background: url(../../../assets/template.png) no-repeat;
  }
  li.addPlan{
    text-align: center;
    cursor: pointer;
    i{
      color: #E8441C;
      font-size: 120px;
      margin-top: 77px;
    }
    span{
      position: absolute;
      left: 0;
      bottom: 30px;
      display: block;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #717070;
    }
    &:hover{
      box-shadow:0px 1px 5px 5px rgba(0,0,0,0.24);
    }
  }
  &::after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
}
</style>
